<template>
    <div class="echart" id="mychart1" style="height: 100%;"></div>
</template>
  
  <script>
  import * as echarts from "echarts";
  
  export default {
    data() {
      return {
        xData: ["十月", "十一月", "十二月", "一月", "二月", "三月", "四月"], //横坐标
        yData: [15, 18, 22, 25, 37, 58, 75],
      };
    },
    mounted() {
      this.initEcharts();
    },
    methods: {
      initEcharts() {
        // 多列柱状图
        const mulColumnZZTData = {
          xAxis: {
            data: this.xData
          },
          // 图例
          legend: {
            data: ["近半年平台门店数据"],
            top: "10%"
          },
          title: {
            text: "近半年平台门店数据",
            top: "0%",
            left: "center"
          },
          yAxis: {},
          series: [
            {
              type: "bar", //形状为柱状图
              data: this.yData,
              name: "近半年平台门店数据",
              label: {
                // 柱状图上方文本标签，默认展示数值信息
                show: true,
                position: "top"
              }
            },
            {
              type: "bar", //形状为柱状图
              name: "任务数", // legend属性
              label: {
                // 柱状图上方文本标签，默认展示数值信息
                show: true,
                position: "top"
              }
            }
          ]
        };
        const myChart = echarts.init(document.getElementById("mychart1"));
        myChart.setOption(mulColumnZZTData);
        //随着屏幕大小调节图表
        window.addEventListener("resize", () => {
          myChart.resize();
        });
      }
    }
  };
  </script>
  
  